<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{#    <script src="https://cdn.jsdelivr.net/npm/vue"></script>#}
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="app">
{#        <span>{{ message }}</span>#}
        <span>[[ message ]]</span>
        <button @click="login">get</button>
        <button @click="login2">post</button>

        <hr>
        [[ username ]]

    </div>


</body>

<script>

    var vm = new Vue({
        el:'#app',
        delimiters:['[[',']]'],
        data:{
            message:"hello 哈哈",
            username:""
        },
        methods:{
            login:function () {
            {#    这里发送axios请求#}
                var url = "http://127.0.0.1:8000/rece/?username=laowang&pw=12345";

                axios.get(url).then((response)=>{
                    {#console.log(response.info.username)#}
                    console.log(response.data.info.username)
                    this.username = response.data.info.username
                }).catch((error)=>{
                    console.log(error)
                })
            },
            login2:function(){
                {#要记得网址最后的  /   #}
                let url = "http://127.0.0.1:8000/rece/";
                axios.post(url, {
                    'username': '如画',
                    'pw':'12345'
                }).then((response)=>{
                    console.log(response.data.info.username)
                    this.username = response.data.info.username
                }).catch((error)=>{
                    console.log(error)
                })

            }
        }
    })

</script>
</html>